@import "compass/css3";

@include font-face("TililliumWeb Light", font-files("TitilliumWeb-Light.ttf"), '', normal, normal);
@include font-face("TililliumWeb Light", font-files("TitilliumWeb-LightItalic.ttf"), '', normal, italic);
@include font-face("TililliumWeb Light", font-files("TitilliumWeb-SemiBold.ttf"), '', bold, normal);
@include font-face("TililliumWeb Light", font-files("TitilliumWeb-SemiBoldItalic.ttf"), '', bold, italic);

@include font-face("TililliumWeb Regular", font-files("TitilliumWeb-Regular.ttf"), '', normal, normal);

@include font-face("SourceCode Pro", font-files("SourceCodePro-Light.ttf"), '', normal, normal);
@include font-face("SourceCode Pro", font-files("SourceCodePro-Medium.ttf"), '', bold, normal);

@mixin retina-image($file, $repeat, $position, $width, $height)
{
  background: url($file + '.png') $repeat $position;

  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2)
  {
    &
    {
      background-image: url($file + '@2x.png');
      -webkit-background-size: $width $height;
    }
  }
}

$color: #f6f6f6;
$color-inv: #111111;

$el-color: #37afa7;
$el-color-act: #1e8e85;

$code-color: #111111;
$code-bg: #e9e9e9;

$mobile-breakpont: 630px;

$footer-height: 208px;

html
{
  box-sizing: border-box;
  height: 100%;
}

*,
*:before,
*:after
{
  box-sizing: inherit;
}

body
{
  margin: 0;
  background: $color;
  color: $color-inv;
  font-size: 1em;
  font-family: 'TililliumWeb Light', sans-serif;
  height: 100%;
  .page-wrap
  {
    height: auto;
    min-height: 100%;
    padding-bottom: $footer-height;
  }
}

a
{
  color: $el-color;
  text-decoration: none;
  &:hover {
    color: $el-color-act;
  }
}

h2, h3, h4
{
  margin:0;
  font-weight: bold;
}

h1
{
  margin:0 0 1em;
  font-weight: normal;
  font-size: 2.125em;
}
h2
{
  font-size: 1.875em;
  margin-bottom: 1em;
}
h3
{
  font-size: 1.5625em;
}
h4
{
  font-size: 1.25em;
}
strong
{
  font-weight: bold;
}
em
{
  font-style: italic;
}
small
{
  font-size: 0.875em;
}
nav,
.nav
{
  font-family: 'TililliumWeb Regular', sans-serif;
}
header
{
  background: $color-inv;
  padding: 3.3em 0 1em;
  .content
  {
    overflow: visible;
  }
  a
  {
    color: $color;
  }
  .logo
  {
    float: left;
  }
  nav
  {
    float: right;
    margin-top: 3em;
    text-transform: uppercase;
  }
  nav a
  {
    margin-left: 3.7em;
    border-bottom: 2px solid $color-inv;
    &:hover,
    &:active,
    .active
    {
      color: $color;
      border-bottom: 2px solid $color;
    }
    @media screen and (max-width: $mobile-breakpont)
    {
      display: block;
    }
  }
}
.button
{
  font-family: 'TililliumWeb Regular', sans-serif;
  background: $el-color;
  color: $color;
  text-transform: uppercase;
  font-size: 0.875em;
  margin: 0;
  border: 0;
  display: block;
  padding: 1em 1.4em 1.1em;
  vertical-align: middle;
  text-align: left;
  &:hover
  {
    background: $el-color-act;
    color: $color;
  }
  &.has-icon
  {
    position: relative;
    padding-right: 25%;
  }
}
.icon
{
  left: auto;
  top: auto;
  right: 1.2em;
  bottom: auto;
  position: absolute;
  img
  {
    vertical-align: bottom;
    margin-bottom: 0.1em;
  }
}
.fork
{
  display: block;
  position: absolute;
  top: -12px;
  right: 0px;
  padding-left: 1em;
  @include retina-image("../images/icons/fork", no-repeat, left center, 5px, 20px);
}
.page
{
  padding: 2em 0 0;
  position: relative;
}
.content
{
  width: 98%;
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}
code,
pre
{
  font-family: 'SourceCode Pro', 'Courier New';
  font-size: 0.875em;
  background: $code-bg;
  color: $code-color;
  @include border-radius(4px);
  padding: 0.5em 1em 0.4em;
  margin: 0;
  line-height: 1.5em;
  display: block;
  code,
  pre
  {
    font-size: 1em;
  }
}
ul,
ul li,
{
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
.clear {
  clear: both;
  height: 1px;
  overflow: hidden;
  visibility: hidden;
  margin-top: -1px;
}
.with-nav:after
{
	content: '.';
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}


.with-nav
{
  .text
  {
    float: right;
    width: 70%;
    @media screen and (max-width: $mobile-breakpont)
    {
      float: none;
      width: auto;
    }
  }
  > .nav
  {
    margin-top: 4em;
    font-size: 0.9375em;
    line-height: 1.3em;
    float: left;
    width: 30%;
    padding-right: 1em;
    li
    {
      padding: 0.5em 0.4em 0.4em 1.6em;
      &.active
      {
        @include retina-image("../images/leaf", no-repeat, left 0.4em, 15px, 18px);
      }
    }
    .nav
    {
      display: none;
    }
    .active .nav
    {
      display: block;
    }
    @media screen and (max-width: $mobile-breakpont)
    {
      margin-top: 0;
      padding-bottom: 1em;
      border-bottom: 1px solid $color-inv;
      margin-bottom: 1em;
      font-size: 1em;
      float: none;
      width: auto;
      li a
      {
        margin-bottom: 0.5em;
      }
    }
  }
  .nav a
  {
    display: block;
  }
}

.hero
{
  color: $color;
  background: $color-inv;
  h1,
  .hero-image img
  {
    text-align: center;
    max-width: 99.5%;
  }
  .hero-image
  {
    @media screen and (max-width: $mobile-breakpont)
    {
      padding-bottom: 4em;
    }
  }
  .hero-buttons
  {
    background: rgba(34,34,34,0.9);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
  .hero-buttons .content
  {
    padding-top: 2.55em;
    padding-bottom: 2.6em;
    text-align: center;
    @media screen and (max-width: $mobile-breakpont)
    {
      padding-top: 1em;
      padding-bottom: 1em;
    }
  }
  .hero-buttons .content li
  {
    margin: 1% 1.77%;
    display: inline-block;
    width: 22%;
    @media screen and (max-width: 830px)
    {
      width: 29%;
    }
    @media screen and (max-width: $mobile-breakpont)
    {
      display: block;
      width: 60%;
      margin: 1% auto;
    }
  }
}

footer
{
  position: relative;
  margin-top: -$footer-height;
  height: $footer-height;
  .content
  {
    padding: 5.4em 0;
  }
  .copyright
  {
    font-size: 0.85em;
    float: left;
    width: 45%;
  }
  .logo
  {
    text-align: right;
    float: right;
    width: 40%;
  }
  .logo img
  {
    margin-top: 3px;
    max-width: 100%;
  }
}
